<template>
	<div class="layout-home grill-col-home">
		<h1>早上好:{{ store.userStore.user.username }}</h1>
	</div>

	<el-row class="grill-row-home">
		<el-card class="layout-home grill-row-home grill-col-home" style="margin-bottom: 0px; margin-top: 0px">
			<h2>员工概况</h2>
			<staffInfo />
		</el-card>
	</el-row>

	<el-row class="grill-row-home">
		<el-col :span="6">
			<el-card class="layout-home grill-col-home">
				<h2>快捷入口</h2>
				<menuLnk />
			</el-card>
		</el-col>
		<el-col :span="7">
			<el-card class="layout-home grill-col-home">
				<el-row>
					<el-col :span="12"><h2>日程待办</h2> </el-col>
					<el-col :span="12">
						<h2 class="span-home-font">
							<router-link to="/nb/schedule/index">
								<span style="cursor: pointer">全部日程</span>
							</router-link>
						</h2>
					</el-col>
				</el-row>

				<schedule />
				<el-divider style="margin: 0"></el-divider>
				<scheduleInfo />
			</el-card>
		</el-col>
		<el-col :span="11">
			<el-card class="layout-home grill-col-home">
				<el-row>
					<el-col :span="12"><h2>审批概况</h2> </el-col>
					<el-col :span="12">
						<h2 class="span-home-font"><span onclick="alert(11)" style="cursor: pointer">全部审批</span></h2>
					</el-col>
				</el-row>

				<auditInfo />
			</el-card>
		</el-col>
	</el-row>

	<el-row class="grill-row-home">
		<el-col :span="8">
			<el-card class="layout-home grill-col-home">
				<el-row>
					<el-col :span="12"><h2>资产</h2> </el-col>
					<el-col :span="12">
						<h2 class="span-home-font"><span onclick="alert(11)" style="cursor: pointer">全部资产</span></h2>
					</el-col>
				</el-row>

				<assetLnk />
			</el-card>
		</el-col>
		<el-col :span="8">
			<el-row>
				<el-card class="layout-home grill-col-home grill-col--">
					<el-row>
						<el-col :span="12"><h2>招聘</h2> </el-col>
						<el-col :span="12">
							<h2 class="span-home-font"><span onclick="alert(11)" style="cursor: pointer">全部候选人</span></h2>
						</el-col>
					</el-row>

					<recruitLnk />
				</el-card>
				<el-card class="layout-home grill-col-home grill-height grill-col--" id="personnel">
					<el-row>
						<el-col :span="12"><h2>人事</h2> </el-col>
						<el-col :span="12">
							<h2 class="span-home-font"><span onclick="alert(11)" style="cursor: pointer">全部纪录</span></h2>
						</el-col>
					</el-row>

					<personnelInfo />
				</el-card>
			</el-row>
		</el-col>
		<el-col :span="8">
			<el-row>
				<el-card class="layout-home grill-col-home grill-col--">
					<el-row>
						<el-col :span="12"><h2>绩效考核</h2> </el-col>
						<el-col :span="12">
							<h2 class="span-home-font"><span onclick="alert(11)" style="cursor: pointer">全部考核计划</span></h2>
						</el-col>
					</el-row>

					<kpiInfo />
				</el-card>
				<el-card class="layout-home grill-col-home grill-height grill-col--" ref="attendance">
					<el-row>
						<el-col :span="12"><h2>今日考勤</h2> </el-col>
						<el-col :span="12">
							<h2 class="span-home-font"><span onclick="alert(11)" style="cursor: pointer">全部纪录</span></h2>
						</el-col>
					</el-row>

					<attendanceInfo />
				</el-card>
			</el-row>
		</el-col>
	</el-row>
</template>

<script setup lang="ts" name="Home">
import store from '@/store'

import staffInfo from '@/views/home/staff_info.vue'
import menuLnk from '@/views/home/menu_lnk.vue'
import schedule from '@/views/home/schedule.vue'
import scheduleInfo from '@/views/home/schedule_info.vue'
import auditInfo from '@/views/home/audit_info.vue'

import assetLnk from '@/views/home/asset_lnk.vue'
import recruitLnk from '@/views/home/recruit_lnk.vue'
import personnelInfo from '@/views/home/personnel_info.vue'
import kpiInfo from '@/views/home/kpi_info.vue'
import attendanceInfo from '@/views/home/attendance_info.vue'

import { ref, onMounted } from 'vue'

//同步人事磁贴高度为考勤高度
const attendance = ref()
onMounted(() => {
	const pHeight = () => {
		let pp = document.getElementById('personnel')
		let aa = attendance.value.$el.clientHeight
		pp?.setAttribute('style', 'height:' + aa + 'px;')
	}
	pHeight()
})
</script>
<style>
@import '../css/home-row-col.css';
</style>
